var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //每次build前清理dist文件夹
const MiniCssExtractPlugin = require("mini-css-extract-plugin");// 抽离css成单独的css文件
const vueLoaderPlugin = require('vue-loader/lib/plugin');
const optimizeCSS = require('optimize-css-assets-webpack-plugin'); //压缩css
const webpack = require('webpack');

const htmlTitle = "学习webpack";

module.exports = {
  mode: "development",
  // entry: './src/index.js',
  entry: ["@babel/polyfill", path.resolve(__dirname, './src/index.js')],
  output: {
    filename: 'bunld.[hash:8].js',      //打包后index.js的名字，[hash:8]文件名添加hash,只添加8位
    // 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index，
    path: path.resolve(__dirname, 'dist'),
  },
  module: {// 模块
    rules: [
      {
        test: /\.vue$/,
        use: ['vue-loader']
      },
      /**
       * loader特点：处理单一，每个不同功能用不同的loader
       * loader用法： 只用一个loader写字符串, 用到多个loader写[]，需要配置写{}
       * loader顺序：默认从右往左执行，从下到上执行
       * css-loader是处理 import(在js文件引入css)和 @import 这种语法的(在css文件引入另外css)
       * style-loader是把css插入head标签中,用style标签包围
       */
      {
        test: /\.css$/, //正则，处理.css结尾的文件
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,//替换style-loader，把处理的css用这个loader出来，弄成单独css文件
          'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      },
      // {
      //   test: /\.js$/,
      //   use: {
      //     loader: "eslint-loader",
      //     options: {
      //       enforce: 'pre' //previous 设置这个，它会先于普通loader执行。
      //     }
      //   },
      // },
      {
        test: /\.js$/, //普通normal loader
        use: {
          loader: 'babel-loader',//把es6转换es5
          options: {
            presets: ['@babel/preset-env']
          }
        },
        include: path.resolve(__dirname, 'src'), // 只查找src文件下的
        exclude: /node_modules/ //排除这个文件夹
      },
      {
        test: /\.(jpe?g|png|gif)$/i, //图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240, //小于1M会返回 base64
              fallback: {
                loader: 'file-loader',//大于1M会用file-loader处理，将文件移动到输出的目录中
                options: {
                  name: 'img/[name].[hash:8].[ext]' // 会创建img文件夹，里面的图片名是name+hash+后缀名：a.xdsf32g.png
                }
              }
            }
          }
        ]
      },
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.runtime.esm.js',
      ' @': path.resolve(__dirname, './src')
    },
    extensions: ['*', '.js', '.json', '.vue']
  },
  devServer: {
    port: 8090,//端口
    hot: true, //热更新
    progress: true, //开启查看进度  
    open: true, //自动打开浏览器
    compress: true,//开启gzip压缩
    // contentBase: './dist' //是运行指定文件夹(名字随便，这里用dist文件夹)中的index.html，在没有用html-webpack-plugin时用，用了那插件这个没效果
  },
  externals: { //只引入不打包
    jquery: "$"
  },
  //插件，里面不分顺序的
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: htmlTitle, // 可以动态传入html标题，但html的head那必须按固定格式填写
      template: './index.html',//模板路径，就是打包后，在dist文件夹会自动生成html文件，并自动引入js文件（生成的html和路径中的html内容是一样的，只是会自动引入js文件）
      hash: true,// html引用js文件时添加hash值
      // chunks: ['index'], // 与入口文件对应的模块名,到时的html只会引入数组中的js，不写这个，默认会引入所有js:index.js和main.js
      minify: {
        removeAttributeQuotes: true, // 移除html中的引号
        collapseWhitespace: true, //把html打包成一行
      }
    }),
    new vueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].css"
      // filename: "[name].[hash:8].css", //打包出来的css文件名，默认main.css
    }),
    // new webpack.ProvidePlugin({
    //   $: "jquery"  //为每个模块都注入了jquery，在js不用引入可以直接使用$
    // })
  ],
  optimization: {//优化项
    minimize: true, //开启压缩
    minimizer: [
      new optimizeCSS()
    ]
  }
}